<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                    <div class="mb-2"
                         style="margin-bottom:40px">
                        <Button custom-icon="iconfont icon-fangkuai2"
                                size="small"
                                type="primary"
                                @click="showCreateModal">
                            新建企业管理员
                        </Button>
                        <!-- <Col span="4">
                        <Input v-model="queryData.siteName"
                               placeholder="回收网点名称"
                               style="width: 250px" clearable/>
                        </col>

                        <Button type="primary"
                                custom-icon="iconfont icon-chaxun"
                                size="small"
                                @click="iQueryData">查找</Button> -->
                    </div>
                    <div class="normal-list-page-bd">
                        <Table :columns="columns"
                               :data="list.data"
                               border></Table>
                    </div>
                    <Page :total="queryAdminData.totalRecord"
                          :current="queryAdminData.page"
                          :page-size="queryAdminData.limit"
                          show-total
                          show-elevator
                          show-sizer
                          @on-change="changePage"
                          @on-page-size-change="changePageSize"
                          style="text-align: center;" />
                </div>
            </div>
            <!-- 新建-->
            
            <Modal v-model="level1Modal.modal1"
                   :title="level1Modal.title"
                   @on-ok="postData"
                   @on-cancel="cancel"
                   height="600px">
                <Form :model="level1Modal.formData"
                      :rules="level1Modal.ruleValidate"
                      ref="systemFro"
                      :label-width="130">
                    <!-- <FormItem label="回收企业名称"
                              prop="companyName" >
                        <Input v-model="level1Modal.formData.companyName"
                               placeholder="请输入企业名称"
                               style="width:350px;" disabled></Input>
                    </FormItem> -->
                    <FormItem label="姓名" v-if="!adminFlag"
                              prop="adminId">
                        <Select @on-change="changeAdminName"
                                clearable
                                label-in-value="true"
                                v-model="level1Modal.formData.adminId"
                                style="width:350px;">
                            <Option v-for="item in level1Modal.companyAdminOptions"
                                    :value="item.value"
                                    :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="姓名" v-if="adminFlag"
                              prop="adminName">
                        <Input v-model="level1Modal.formData.adminName"
                               placeholder="请输入姓名"
                               style="width:350px;" disabled></Input>
                    </FormItem>
                    <FormItem label="手机号"
                              prop="adminMobile">
                        <Input v-model="level1Modal.formData.adminMobile"
                               placeholder="请输入手机号"
                               style="width:350px;"></Input>
                    </FormItem>
                    <FormItem label="回收企业名称"
                              prop="companyName">
                        <Input v-model="level1Modal.formData.companyName"
                               placeholder="请输入回收企业名称"
                               style="width:350px;"
                               disabled></Input>
                    </FormItem>
                    <FormItem label="管理人员身份"
                              prop="adminType">
                        <Select @on-change="changeCompanyCode"
                                clearable
                                label-in-value="true"
                                v-model="level1Modal.formData.adminType"
                                style="width:350px;">
                            <Option v-for="item in level1Modal.adminType"
                                    :value="item.value"
                                    :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <!-- <FormItem label="状态"
                              prop="state">
                        <Select @on-change="changeCode"
                                clearable
                                label-in-value="true"
                                v-model="level1Modal.formData.state"
                                style="width:350px;">
                            <Option v-for="item in level1Modal.options"
                                    :value="item.value"
                                    :key="item.value">{{ item.label }}</Option>
                        </Select>

                    </FormItem> -->
                </Form>
            </Modal>


             
        </div>
    </div>
</template>
<script>
import AdminApi from '@/api/recycle/admin.js'

export default {
	props: ['companyAdminData'],
    // 引入 注册
	components: {
		
	},
	data() {
		return {
			queryData: {
				page: 1,
				limit: 10,
				companyId: ''
			},
            queryAdminData: {
				page: 1,
				limit: 10,
				companyId: ''
			},
			columns: [
				{
					title: 'id',
					key: 'id',
					align: 'center'
				},
				// {
				// 	title: '回收管理员id',
				// 	key: 'adminId',
				// 	align: 'center'
				// },
				{
					title: '姓名',
					key: 'adminName',
					align: 'center'
				},
				{
					title: '手机号码',
					key: 'adminMobile',
					align: 'center'
				},
				{
					title: '管理人员身份',
					key: 'adminType',
					align: 'center',
                    render: (create, params) => {
						let s = params.row.adminType
						let color, text
						if (s == 1) {
							color = '#5ed71a'
							text = '企业管理员'
						} else if(s == 2){
							color = '#5ed71a'
							text = '网点管理员'
						}else if(s == 3){
                            color = '#5ed71a'
							text = '网点回收员'
                        }else if(s == 4){
                              color = '#5ed71a'
							text = '网点清运人员'
                        }
						return create(
							'div',
							{
								style: {
									color: color,
									borderRadius: '20px'
								}
							},
							text
						)
					}
				},
				// {
				// 	title: '回收企业id',
				// 	key: 'companyId',
				// 	align: 'center'
				// },
				{
					title: '回收企业名称',
					key: 'companyName',
					align: 'center'
				},
				{
					title: '回收网点名称',
					key: 'siteName',
					align: 'center'
				},
				{
					title: '状态',
					key: 'state',
					align: 'center',
                    render: (h, params) => {
						let s = params.row.state
						return h('i-switch', {
							props: {
								value: s,
								size: 'large'
							},
							scopedSlots: {
								open: () => h('span', '正常'),
								close: () => h('span', '停用')
							},
							on: {
								'on-change': value => {
									this.changeState(params.row, value)
								}
							}
						})
					}
				},
				{
					title: '创建人',
					key: 'createName',
					align: 'center'
				},
				{
					title: '添加时间',
					key: 'createTime',
					align: 'center'
				},
				{
					title: '更新时间',
					key: 'updateTime',
					align: 'center'
				},
				/** 自动生成结束 */
				{
					title: '操作',
					align: 'center',
					minWidth: 150,
					render: (h, params) => {
						// 动态渲染组件
						return h('div', { class: 'action-group' }, [
                            
							h(
								'Tooltip',
								{
									props: {
										placement: 'left',
										content: '编辑'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													this.showUpdateModal(
														params.row
													)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type:
														' iconfont icon-bianjisekuai',
													size: 18
												}
											})
										]
									)
								]
							),

							h(
								'Tooltip',
								{
									props: {
										placement: 'right',
										content: '删除'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'error',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													this.delData(params.row)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type:
														' iconfont icon-shanchusekuai',
													size: 18
												}
											})
										]
									)
								]
							)
						])
						// }
					}
				}
			],
			list: {
				data: [
				]
			},
			level1Modal: {
				modal1: false,
				title: '',
				formData: {
					// siteName: '',
					// siteAddress: '',
					// companyId: '',
					// companyName: '',
					// contacts: '',
					// mobile: '',
					// phone: '',
					state: false,
					// provId: '',
					// cityId: '',
					// distId: '',
					// strtId: '',
					// commId: '',
					// comminId: ''
				},
				ruleValidate: {
					adminId: [
						{
							required: true,
							message: '姓名不能为空'
						}
					],

					adminMobile: [
						{
							required: true,
							message: '请输入手机号码',
							trigger: 'blur'
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: '手机号码格式不正确',
							trigger: 'blur'
						}
					]
				},
				companyAdminOptions: [
					// {
					// 	value: 4,
					// 	label: '杭州拱墅区再生资源回收有限公司'
					// },
				],
				adminType: [
					{
						value: 1,
						label: '企业管理员'
					}
				],
                options: [
                    
					{
						value: 'true',
						label: '正常'
					},
					{
						value: 'false',
						label: '停用'
					},
				],
				recyclingCompanyNameFlag: false,
				companyNameFlag: false
			},
            adminFlag:false,
            adminUnListData:[]
		}
	},
	mounted() {
		this.getAdminUnList()
        this.getPageList()
	},
	computed: {},
	// 监听companyAdminData是否变化
	watch: {
		companyAdminData(newValue, oldValue) {
			if (newValue != oldValue) {
				this.getAdminUnList()
                this.getPageList()
			} else if (newValue == oldValue) {
				this.getAdminUnList()
			}
		}
	},
	methods: {
        
		// 加载区域企业未关联用户
		async getAdminUnList() {
			this.queryData.provId = this.companyAdminData.provId
			this.queryData.cityId = this.companyAdminData.cityId
			this.queryData.distId = this.companyAdminData.distId
			this.queryData.strtId = this.companyAdminData.strtId
			this.queryData.commId = this.companyAdminData.commId
			this.queryData.comminId = this.companyAdminData.comminId
			this.queryData.companyId = this.companyAdminData.id
			let data = (await AdminApi.getAdminUnList(this.queryData)).data
            console.log(data,'data11111111111111111111111111111111111111111111')
            this.level1Modal.formData.adminMobile = data.adminMobile
			if (data.length > 0) {
				const result = data.map(item => ({
					value: item.adminId + ' ' + item.adminMobile,
					label: item.adminName,
                    
				}))
                
				this.level1Modal.companyAdminOptions = result

			}else{
                this.level1Modal.companyAdminOptions = []
            }
		},
        
        // 管理员列表
		async getPageList() {
            
			this.queryAdminData.companyId = this.companyAdminData.id
			let data = (await AdminApi.getPageList(this.queryAdminData)).data
            console.log(data,'222222222222222222222222')
			this.list.data = data.list
			this.queryAdminData.limit = data.pageSize
			this.queryAdminData.page = data.pageNum
			this.queryAdminData.totalRecord = data.totalRecord
		},
		showCreateModal() {

			this.level1Modal.modal1 = true
			this.level1Modal.title = '新建企业管理员'
            this.level1Modal.formData.companyId = this.companyAdminData.id
            this.level1Modal.formData.companyName = this.companyAdminData.companyName
		},
		showUpdateModal(row) {
            this.adminFlag = true
            this.level1Modal.formData.id = row.id
            this.level1Modal.formData.adminId = row.adminId
            this.level1Modal.formData.adminName = row.adminName
            this.level1Modal.formData.adminMobile = row.adminMobile
            this.level1Modal.formData.adminType = row.adminType
            this.level1Modal.formData.companyName = row.companyName
            this.level1Modal.formData.state = JSON.stringify(row.state)
			this.level1Modal.modal1 = true
			this.level1Modal.title = '编辑企业管理员'
            
		},
		postData() {
			let that = this
            that.level1Modal.formData.state = true
			this.$refs['systemFro'].validate(valid => {
				if (valid) {
					if (!that.level1Modal.formData.id) {
						AdminApi.add(that.level1Modal.formData).then(
							res => {
								if (res.data) {
									that.$Message.success('添加成功')
									that.level1Modal.modal1 = false
									that.getPageList()
                                    that.getAdminUnList()
									this.$refs['systemFro'].resetFields()
									return
								} else {
									that.$Message.error(res.message)
								}
							}
						)
					} else if (that.level1Modal.formData.id) {
						// //修改
						AdminApi.update(
							that.level1Modal.formData
						).then(res => {
							if (res.code == 0) {
								that.$Message.success('修改成功')
								that.level1Modal.modal1 = false
                                that.adminFlag = false
								that.getPageList()
                                that.getAdminUnList()
                                that.level1Modal.formData = {}
								this.$refs['systemFro'].resetFields()
								return
							} else {
								that.$Message.error(res.message)
							}
						})
					}
				} else {
					this.$Message.error('请填写完整的表单项')
				}
			})
		},
        cancel() {
            this.adminFlag = false
			this.$refs['systemFro'].resetFields()
		},
		changeAdminName(val) {
			if (val) {
                console.log(val,'111111111111')
                let arr = val.value.split(" ");
                console.log(arr[0],arr[1])  
				this.level1Modal.formData.adminId = Number(arr[0])
                console.log(this.level1Modal.formData.adminId,'this.level1Modal.formData.adminId')
                this.level1Modal.formData.adminMobile = arr[1] 
				this.level1Modal.formData.adminName = val.label
                this.adminFlag = true
                console.log(this.level1Modal.formData,'this.level1Modal.formData')  
			}
		},
        changeState(row, value) {
			let that = this
			this.$Modal.confirm({
				title: '确认修改',
				content:
					'<p>您确认修改id为 <strong>' +
					row.id +
					'</strong> 的 <strong>' +
					row.adminName +
					'</strong> 的管理员的状态嘛 吗?</p>',
				loading: true,
				onOk: () => {
					var formData = {
						id: row.id,
						state: value
					}
					AdminApi.update(formData).then(res => {
						this.$Modal.remove()
						if (res.code == 0) {
							that.$Message.success('修改成功')
							that.level1Modal.modal1 = false
							that.getPageList()
                            that.getAdminUnList()
							this.$refs['systemFro'].resetFields()
                            that.level1Modal.formData = {}
							return
						} else {
							this.$refs['systemFro'].resetFields()
							that.$Message.error(res.message)
						}
					})
				},
				onCancel: () => {
                    this.adminFlag = false
					this.getPageList()
				}
			})
		},
        delData(row) {
			this.$Modal.confirm({
				title: '确认删除',
				content:
					'<p>您确认删除id为 <strong>' +
					row.id.toString() +
					'</strong> 的 <strong>' +
					row.adminName +
					'</strong> 管理员吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
				loading: true,
				onOk: () => {
					AdminApi.del(row.id).then(res => {
						this.$Modal.remove()
						if (res.code == 0) {
							this.$Notice.success({
								title: '删除成功'
							})
							this.queryData.page = 1
							this.getPageList()
                            this.getAdminUnList()
						} else {
							this.$Notice.error({
								title: res.message
							})
						}
					})
				}
			})
		},
       // 分页
        changePage(page) {
            this.queryAdminData.page = page
            this.getPageList()
		},
		changePageSize(pageSize) {
            this.queryAdminData.limit = pageSize
            this.getPageList()
		},
	}
}
</script>
<style scoped>
</style>
